import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import { increment, decrement } from '../store/features/counter'
export class Profile extends PureComponent {

  subNumber(number){
    this.props.subNumber(number)
  }
  addNumber(number){
    this.props.addNumber(number)
  }
  render() {
    const { counter, banners, recommends } = this.props;
    return (
      <div>
        <h2>Profile Counter: {counter}</h2>
        <button onClick={() => this.subNumber(1)}>-1</button>
        <button onClick={() => this.subNumber(5)}>-5</button>
        <button onClick={() => this.addNumber(6)}>+6</button>
        <div className="banner">
          <h2>轮播图</h2>
          <ul>
            {
              banners.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
        <div className="recommend">
          <h2>轮播图</h2>
          <ul>
            {
              recommends.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter.value,
    banners: state.home.banners,
    recommends: state.home.recommends
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    subNumber: function(number){
      dispatch(decrement(number))
    },
    addNumber: function(number){
      dispatch(increment(number))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Profile)